<template>
  <div>
    <myheader></myheader>
    <navtable></navtable>
    <b class="line"></b>
    <div class="clear"></div>
    <div class="center" style="margin-top:0;">
      <div class="col-main">
        <div class="main-wrap">

          <div class="user-order">

            <!--标题 -->
            <div class="am-cf am-padding">
              <div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">订单管理</strong> / <small>Order</small></div>
            </div>
            <hr />

            <div class="am-tabs am-tabs-d2 am-margin" data-am-tabs>

              <ul class="am-avg-sm-5 am-tabs-nav am-nav am-nav-tabs">
                <li v-bind:class="active(-1)" v-on:click="orderStatus=-1,qryOrders()"><a href="javascript:;;">所有订单</a></li>
                <li v-bind:class="active(2)" v-on:click="orderStatus=2,qryOrders()"><a href="javascript:;;">待付款</a></li>
                <li v-bind:class="active(3)" v-on:click="orderStatus=3,qryOrders()"><a href="javascript:;;">待确认</a></li>
                <li v-bind:class="active(11)" v-on:click="orderStatus=11,qryOrders()"><a href="javascript:;;">待发货</a></li>
                <li v-bind:class="active(13)" v-on:click="orderStatus=13,qryOrders()"><a href="javascript:;;">待收货</a></li>
              </ul>

              <div class="am-tabs-bd">
                <div class="am-tab-panel am-fade am-in am-active" id="tab1">
                  <div class="order-top">
                    <div class="th th-item">
                      商品
                    </div>
                    <div class="th th-price">
                      单价
                    </div>
                    <div class="th th-number">
                      数量
                    </div>
                    <div class="th th-operation">
                      商品操作
                    </div>
                    <div class="th th-amount">
                      合计
                    </div>
                    <div class="th th-status">
                      交易状态
                    </div>
                    <div class="th th-change">
                      交易操作
                    </div>
                  </div>

                  <div class="order-main">
                    <div class="order-list">
                      <div class="order-status5" v-for="order in orderList">
                        <div class="order-title">
                          <div class="dd-num">订单编号：<a href="javascript:;">{{order.id}}</a></div>
                          <span>创建时间:<em class="ml-10" v-text="dateFormatter(order.createTime)"></em></span>
                          <!--    <em>店铺：小桔灯</em>-->
                        </div>
                        <div class="order-content">
                          <div class="order-left">
                            <ul class="item-list" v-for="item in order.orderDetails">
                              <li class="td td-item">
                                <div class="item-pic">
                                  <a href="javascript:;;" v-on:click="toItem(item.itemId)" class="J_MakePoint">
                                    <img v-bind:src="item.mainImg" style="width:80px;" class="itempic J_ItemImg">
                                  </a>
                                </div>
                                <div class="item-info">
                                  <div class="item-basic-info">
                                    <a href="#">
                                      <p>{{item.itemName}}</p>
                                      <p class="info-little">颜色：12#川南玛瑙
                                        <br />包装：裸装 </p>
                                    </a>
                                  </div>
                                </div>
                              </li>
                              <li class="td td-price">
                                <div class="item-price">
                                  {{item.transPrice}}
                                </div>
                              </li>
                              <li class="td td-number">
                                <div class="item-number">
                                  <span>×</span>{{item.buyNum}}
                                </div>
                              </li>
                              <li class="td td-operation">
                                <div class="item-operation" style="color:#909399" >
                                  商品快照
                                </div>
                                <router-link :to="{name:'comment',query:{orderId:order.id,itemId:item.itemId}}" class="item-operation" v-if="order.orderStatus==14&&item.iscomment==0" style="color:#409EFF">
                                  添加评价
                                </router-link>
                              </li>
                            </ul>
                          </div>
                          <div class="order-right">
                            <li class="td td-amount">
                              <div class="item-amount">
                                合计：{{order.transPrice}}
                                <!-- <p>含运费：<span>10.00</span></p> -->
                              </div>
                            </li>
                            <div class="move-right">
                              <li class="td td-status">
                                <div class="item-status">
                                  <p class="Mystatus" v-text="orderStatusFormatter(order.orderStatus)"></p>

                                </div>
                              </li>
                              <li class="td td-change">
                                <p class="order-info"><a href="javascript:;;" style="color:#67C23A" v-on:click="toOrder(order.id)">订单详情</a></p>
                                <p v-if="order.orderStatus==4||order.orderStatus==12||order.orderStatus==15" class="order-info"><a href="javascript:;;" style="color:#E6A23C" v-on:click="del(order.id)">删除订单</a></p>
                                <p class="order-info" v-if="order.orderStatus<12"><a href="javascript:;;" style="color:#E6A23C" v-on:click="cancel(order.id)">取消订单</a></p>
                                <p class="order-info"><a href="javascript:;;" style="color:#409EFF" v-on:click="toPay(order.id)" v-if="order.orderStatus==2">去支付</a></p>
                                <p class="order-info"><a href="javascript:;;" style="color:#409EFF" v-on:click="toConfirm(order.id)" v-if="order.orderStatus==0">去支付</a></p>
                                <p class="order-info"><a href="javascript:;;" style="color:#909399" v-if="order.tradeType==1 && order.orderStatus>=13" @click="openwl(order.expressNo)">查看物流</a></p>
                                <p class="order-info"><a href="javascript:;;" @click="finishOrder(order.id)" v-if="order.orderStatus==13" style="color:#409EFF">确认收货</a></p>
                              </li>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>

                  </div>

                </div>
              </div>

            </div>
          </div>
        </div>
        <!--底部-->
        <foot></foot>
      </div>
      <leftmenu></leftmenu>
    </div>
    <navfull></navfull>
  </div>
</template>

<script>
import myheader from '@/components/myheader.vue'
import navfull from '@/components/navfull.vue'
import navtable from '@/components/navtable.vue'
import leftmenu from '@/components/leftmenu.vue'
import foot from '@/components/foot.vue'
export default {
  name: 'order',
  data () {
    return {
      orderList: [],
      orderStatus: -1
    }
  },
  components: {
    myheader,
    navfull,
    navtable,
    leftmenu,
    foot
  },
  mounted () {
    this.qryOrders();
  },
  methods: {
    openwl(id) {
        this.$alert(id, "快递单", {
          confirmButtonText: '确定',
          callback: action => {
           
          }
        });
      },
    active (status) {
      if (status == this.orderStatus) {
        return "am-active";
      } else {
        return "";
      }
    },
    qryOrders () {
      var states = [];
      if (this.orderStatus == 2) {
        states.push(0);
        states.push(2);
      } else if (this.orderStatus == -1) {

      } else if (this.orderStatus == 3) {
        states.push(1);
        states.push(3);
      } else {
        states.push(this.orderStatus);
      }
      this.axios.get("/trade/order/orders", {
        params: {
          orderStates: states
        }
      }).then((res) => {
        var result = res.data;
        if (result.code == 200) {
          this.orderList = result.data;
        } else {
          this.orderList = [];
        }
      })
    },
    cancel (orderId) {
      this.$prompt('请输入取消原因', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        this.axios.post("/trade/order/cancel", {
          orderId: orderId,
          reason: value
        }).then((res) => {
          var result = res.data;
          if (result.code == 200) {
            this.$layer.msg("取消成功");
            this.qryOrders();
          } else {
            this.$layer.msg((result.msg == null ? "取消失败" : result.msg))
            this.qryOrders();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '操作取消'
        });
      });

    },
    del (orderId) {
      this.axios.delete("/trade/order", {
        params: {
          orderId: orderId
        }
      }).then((res) => {
        var result = res.data;
        if (result.code == 200) {
          this.$layer.msg("删除成功");
          this.qryOrders();
        } else {
          this.$layer.msg((result.msg == null ? "删除失败" : result.msg));
          this.qryOrders();
        }
      })
    },
    finishOrder (orderId) {
      this.axios.put("/trade/order/finish", {
        id: orderId
      }).then((res) => {
        var result = res.data;
        if (result.code == 200) {
          this.$layer.msg("操作成功");
          this.qryOrders();
        } else {
          this.$layer.msg(result.msg == null ? "操作失败" : result.msg);
          this.qryOrders();
        }
      })
    },
    dateFormatter (date) {
      var time = new Date(date);
      var y = time.getFullYear();
      var m = time.getMonth() + 1;
      var d = time.getDate();
      var h = time.getHours();
      var mm = time.getMinutes();
      var s = time.getSeconds();
      return y + '-' + add0(m) + '-' + add0(d) + ' ' + add0(h) + ':' + add0(mm) + ':' + add0(s);
    },
    orderStatusFormatter (state) {
      switch (state) {
        case 0:
          return "待提交"
        case 1:
          return "已提交"
        case 2:
          return "待支付"
        case 3:
          return "已支付"
        case 4:
          return "已取消"
        case 11:
          return "已确认"
        case 12:
          return "卖家取消"
        case 13:
          return "待收货"
        case 14:
          return "待评价"
        case 15:
          return "已完成"
      }
    },
    toItem (itemId) { //跳转到商品详情页
      this.$router.push({
        name: "item",
        query: {
          itemId: itemId
        }
      })
    },
    toPay (orderId) {
      this.$router.push({
        name: "pay",
        query: {
          orderId: orderId
        }
      })
    },
    toConfirm (orderId) {
      this.$router.push({
        name: "orderconfirm",
        query: {
          orderId: orderId + "&&"
        }
      })
    },
    toOrder (orderId) {
      this.$router.push({
        name: "orderinfo",
        query: {
          orderId: orderId
        }
      })
    },
    toComment (orderId) {
      this.$router.push({
        name: "comment",
        query: {
          orderId: orderId
        }
      })
    }
  }
}

function add0 (m) {
  return m < 10 ? '0' + m : m
}
</script>

<style scoped>
@import "../../../AmazeUI-2.4.2/assets/css/admin.css";
@import "../../../AmazeUI-2.4.2/assets/css/amazeui.css";
@import "../../../assets/css/personal.css";
@import "../../../assets/css/orstyle.css";
</style>